<div class="layuimini-container layuimini-page-anim">
	<div class="layuimini-main">

		<script type="text/html" id="tableToolbarDemo">
			<div class="layui-btn-container">
				<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="table-add"> 添加</button>
			</div>
		</script>

		<script type="text/html" id="tableItemContent">
			<div style="margin: 10px 10px;text-align: center;">
				<form class="layui-form layui-form-pane" lay-filter="table-data-form">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">当前状态</label>
							<div class="layui-input-inline">
								<select lay-verify="required" name="current_status" id="current_status">
									<option>请选择</option>
									<option value="计划">计划</option>
									<option value="取消">取消</option>
									<option value="完成">完成</option>
								</select>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">登机口</label>
							<div class="layui-input-inline">
								<select lay-verify="required" name="boarding_gate" id="boarding_gate">
									<option>请选择</option>
									<option value="1">1</option>
									<option value="2">2</option>
									<option value="3">3</option>
									<option value="4">4</option>
									<option value="5">5</option>
								</select>
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">执行价格</label>
							<div class="layui-input-inline">
								<input type="number" lay-verify="required" id="execution_price" name="execution_price" autoComplete="off" class="layui-input" />
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">预计起飞时间</label>
							<div class="layui-input-inline">
								<input type="text" lay-verify="required" id="estimated_takeoff_time" name="estimated_takeoff_time" autoComplete="off" class="layui-input" />
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">预计到达时间</label>
							<div class="layui-input-inline">
								<input type="text" lay-verify="required" id="estimated_arrival_time" name="estimated_arrival_time" autoComplete="off" class="layui-input" />
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">实际起飞时间</label>
							<div class="layui-input-inline">
								<input type="text" id="actual_takeoff_time" name="actual_takeoff_time" autoComplete="off" class="layui-input" />
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">实际到达时间</label>
							<div class="layui-input-inline">
								<input type="text" id="actual_arrival_time" name="actual_arrival_time" autoComplete="off" class="layui-input" />
							</div>
						</div>
					</div>

					<div class="layui-form-item" style="margin-top: 10px;">
						<div class="layui-inline">
							<a class="layui-btn layui-btn-primary" lay-submit lay-filter="table-data-ok-btn">确定 </a>
						</div>
					</div>
				</form>
			</div>
		</script>

		<table class="layui-hide" id="tableCurrentTableId" lay-filter="tableCurrentTableFilter"></table>

		<script type="text/html" id="tableCurrentTableBar">
			<a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="table-edit">编辑</a>
			<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="table-delete">删除</a>
		</script>

	</div>

</div>

<script>
	layui.use(['form', 'table', 'element','laydate'], function () {
		var $ = layui.jquery,
			form = layui.form,
			table = layui.table,
			laydate = layui.laydate;
		table.render({
			elem: '#tableCurrentTableId',
			url: '/api/OnFlight',
			where: {'flight_id': toChildVal.fid},
			toolbar: '#tableToolbarDemo',
			defaultToolbar: ['filter', 'exports', 'print'],
			cols: [[
				{field: 'id', title: 'ID', sort: true},
				{field: 'current_status', title: '状态'},
				{field: 'execution_price', title: '执行价格'},
				{field: 'estimated_takeoff_time', title: '预计起飞时间'},
				{field: 'estimated_arrival_time', title: '预计到达时间'},
				{field: 'actual_takeoff_time', title: '实际起飞时间'},
				{field: 'actual_arrival_time', title: '实际到达时间'},
				{field: 'boarding_gate', title: '登机口'},
				{title: '操作', toolbar: '#tableCurrentTableBar', align: "center"}
			]],
			limits: [10, 20, 50, 100],
			limit: 10,
			page: true
		});

		function editLayer(){
			var index = layer.open({
				title: '编辑',
				type: 1,
				shade: 0.2,
				maxmin: true,
				shadeClose: true,
				area: ['480px', '600px'],
				content: tableItemContent.innerHTML,
			});
			laydate.render({elem: '#estimated_takeoff_time',type: 'datetime'});
			laydate.render({elem: '#estimated_arrival_time',type: 'datetime'});
			laydate.render({elem: '#actual_takeoff_time',type: 'datetime'});
			laydate.render({elem: '#actual_arrival_time',type: 'datetime'});

			form.render("select");
			return index;
		}

		// toolbar事件监听
		table.on('toolbar(tableCurrentTableFilter)', function (obj) {
			if (obj.event === 'table-add') {
				var index = editLayer();

				// 监听添加提交
				form.on("submit(table-data-ok-btn)", function (result) {
					var formData = result.field;
					formData['flight_id']=toChildVal.fid;
					$.ajax({
						url: "/api/OnFlight",
						data: formData,
						type: "POST",
						dataType: "json",
						success: function (res) {
							layer.close(index); // 关闭add弹出层
							if (res.code == 0) {
								layer.msg("添加成功", {icon: 1, time: 2000});
							} else {
								layer.msg(res.msg, {icon: 2, time: 2000});
							}
							table.reload('tableCurrentTableId');
						},
					});
				});
			}
		});

		//监听单元格工具
		table.on('tool(tableCurrentTableFilter)', function (obj) {
			var data = obj.data;
			if (obj.event === 'table-edit') {

				// ** content
				var index = editLayer();

				form.val('table-data-form', data);

				// 监听修改提交
				form.on("submit(table-data-ok-btn)", function (result) {
					$.ajax({
						url: "/api/OnFlight/" + data.id,	// ** url
						data: result.field,
						type: "PUT",
						dataType: "json",
						success: function (res) {
							layer.close(index);
							if (res.code == 0) {
								layer.msg('修改成功！');
							} else {
								layer.msg(res.msg);
							}
							table.reload('tableCurrentTableId');
						}
					});
				});

			} if (obj.event === 'table-delete') {
				// 监听删除操作
				layer.confirm('确认是否删除？', function (index) {

					$.ajax({
						url: "/api/OnFlight/" + data.id,
						type: "DELETE",
						dataType: "json",
						success: function (res) {
							if (res.code == 0) {
								obj.del();
								layer.msg('删除成功！');
							} else {
								layer.msg(res.msg);
							}
						}
					});

					layer.close(index);
				});
			}
		});
	});
</script>
